<!-- 顾客中心-设置顾客资料 -->
<template>
  <div class="main-content-container setUp">
    <!-- <div class="page-title">设置顾客资料项</div> -->
    <div class="font-size">设置顾客资料项</div>
    <div class="built-in box-show">
      <!-- <div class="table-margin">系统内置字段</div> -->
      <el-table v-loading="loading" :data="builtInList" border :row-class-name="tableColor">
        <el-table-column label="字段" prop="name" :show-overflow-tooltip="true" />
        <el-table-column label="管理后台" :show-overflow-tooltip="true">
          <template slot-scope="row">
            <el-select v-model="row.row.controlledStatus" class="el-select-y" :disabled="row.row.isModify" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.label"
              />
            </el-select>
          </template>
        </el-table-column>
        <el-table-column label="获客系统" :show-overflow-tooltip="true">
          <template slot-scope="row">
            <el-select v-model="row.row.systemStatus" class="el-select-y" :disabled="row.row.isModify" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.label"
              />
            </el-select>
          </template>
        </el-table-column>
        <el-table-column label="微官网" :show-overflow-tooltip="true">
          <template slot-scope="row">
            <el-select v-model="row.row.officialStatus" class="el-select-y" :disabled="row.row.isModify" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.label"
              />
            </el-select>
          </template>
        </el-table-column>
        <el-table-column label="老带新" :show-overflow-tooltip="true">
          <template slot-scope="row">
            <el-select v-model="row.row.oldtonewStatus" class="el-select-y" :disabled="row.row.isModify" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.label"
              />
            </el-select>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="row">
            <el-button v-if="row.row.isModify && row.row.name !== '姓名'" type="text" @click="modifyList(row)">修改</el-button>
            <el-button v-if="!row.row.isModify" type="text" @click="preservation(row)">保存</el-button>
            <el-button v-if="!row.row.isModify" type="text" @click="cancel(row)">取消</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="built-in box-show">
      <!-- <div class="table-margin">自定义字段</div> -->
      <el-table v-loading="loading" :data="customList" border :row-class-name="tableColor">
        <el-table-column label="字段" :show-overflow-tooltip="true">
          <template slot-scope="row">
            <span v-if="row.row.name && row.row.isModify">{{ row.row.name }}</span>
            <el-input v-if="!row.row.name || !row.row.isModify" v-model="row.row.nameDisplay" placeholder="请输入内容" />
          </template>
        </el-table-column>
        <el-table-column label="管理后台" :show-overflow-tooltip="true">
          <template slot-scope="row">
            <el-select v-model="row.row.controlledStatus" class="el-select-y" :disabled="row.row.isModify" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.label"
              />
            </el-select>
          </template>
        </el-table-column>
        <el-table-column label="获客系统" :show-overflow-tooltip="true">
          <template slot-scope="row">
            <el-select v-model="row.row.systemStatus" class="el-select-y" :disabled="row.row.isModify" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.label"
              />
            </el-select>
          </template>
        </el-table-column>
        <el-table-column label="微官网" :show-overflow-tooltip="true">
          <template slot-scope="row">
            <el-select v-model="row.row.officialStatus" class="el-select-y" :disabled="row.row.isModify" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.label"
              />
            </el-select>
          </template>
        </el-table-column>
        <el-table-column label="老带新" :show-overflow-tooltip="true">
          <template slot-scope="row">
            <el-select v-model="row.row.oldtonewStatus" class="el-select-y" :disabled="row.row.isModify" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.label"
              />
            </el-select>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="row">
            <el-button v-if="row.row.isModify" type="text" @click="modifyList(row)">修改</el-button>
            <el-button v-if="!row.row.isModify" type="text" @click="preservation(row)">保存</el-button>
            <el-button v-if="!row.row.isModify && !row.row.isAdd" type="text" @click="cancel(row,true)">取消</el-button>
            <el-button v-if="row.row.isModify || row.row.isAdd" type="text" @click="deleteList(row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-row class="buttons">
        <el-button type="primary" class="add" @click="addList">+ 增加</el-button>
      </el-row>
    </div>
    <div class="font-size" style="padding-bottom:10px">备注模板</div>
    <div class="editor">
      <editor-content class="editor__content box-y" :editor="editor" />
    </div>
    <el-button v-loading="loadings" class="sub" type="primary" @click="templateModification">保存</el-button>
  </div>
</template>
<script>
import { Editor, EditorContent } from 'tiptap';
import { tableColor } from '@/utils/common.js';
export default {
  components: {
    EditorContent,
  },
  data() {
    return {
      editor: null,
      query: null,
      suggestionRange: null,
      filteredUsers: [],
      navigatedUserIndex: 0,
      insertMention: () => {},
      builtInList: [],
      customList: [],
      options: [{ value: 1, label: "必填" }, { value: 2, label: "可填" }, { value: 3, label: "不显示" }],
      loading: false,
      loadings: false,
      id: 0,
      template: "",
      tableColor,
    };
  },
  computed: {
    hasResults() {
      return this.filteredUsers.length;
    },
    showSuggestions() {
      return this.query || this.hasResults;
    },
  },
  created() {
    this.getFindAll();
  },
  beforeDestroy() {
    this.destroyPopup();
  },
  methods: {
    destroyPopup() {
      if (this.popup) {
        this.popup[0].destroy();
        this.popup = null;
      }
    },
    async getFindAll() {
      if (this.editor) {
        this.editor.destroy();
      }
      this.builtInList = [];
      this.customList = [];
      const res = await this.$api['customer/setUp/findAll']({});
      if (res.code !== 200) return;
      this.id = res.data.id;
      this.template = res.data.content;
      res.data.tableConfigEntities.forEach(item => {
        item.isModify = true;
        if (item.property === "系统内置") {
          if (item.name !== "开发人员名称" && item.name !== "渠道名" && item.name !== "开发渠道" && item.name !== "信息来源" && item.type !== "attributionConsultantName" && item.name !== "推荐人名称" || item.name !== "编号") {
            this.builtInList.push(item);
          }
        }
        if (item.property === "自定义") this.customList.push(item);
      });
      this.editor = new Editor({
        onUpdate: ({ state, getHTML, getJSON, transaction }) => {
          this.template = getHTML();
        },
        content: res.data.content,
      });
    },
    async modifyList(row) {
      row.row.isModify = false;
      this.$set(row.row, 'nameDisplay', row.row.name);
    },
    async deleteList(row) {
      const confirmResult = await this.$confirm('请确认是否删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).catch((err) => err);
      if (confirmResult !== 'confirm') {
        return this.$message.info('已取消删除');
      }
      if (!row.row.id) {
        this.customList.splice(row.$index, 1);
        this.$message.success("删除字段成功");
        return;
      }
      const res = await this.$api['customer/setUp/deteleTableconfig']({ id: row.row.id });
      if (res.code !== 200) {
        this.$message.error(res.msg);
        return;
      }
      this.$message.success("删除字段成功");
      this.getFindAll();
    },
    addList() {
      const json = { name: "", nameDisplay: "", controlledStatus: "", systemStatus: "", officialStatus: "", oldtonewStatus: "", isModify: false, isAdd: true };
      this.customList.push(json);
    },
    preservation(row) {
      let isTrue = false;
      let text = "";
      if (!row.row.nameDisplay) {
        isTrue = true;
        text = "请输入姓名";
      } else if (!row.row.controlledStatus) {
        isTrue = true;
        text = "请设置管理后台是否可填";
      } else if (!row.row.systemStatus) {
        isTrue = true;
        text = "请设置获客系统是否可填";
      } else if (!row.row.officialStatus) {
        isTrue = true;
        text = "请设置微官网是否可填";
      } else if (!row.row.oldtonewStatus) {
        isTrue = true;
        text = "请设置老带新系统是否可填";
      }
      if (isTrue) {
        this.$message.error(text);
        return false;
      }
      row.row.name = row.row.nameDisplay;
      row.row.isModify = true;
      if (!row.row.id) {
        this.addField(row.row);
      } else {
        this.modifyField(row.row);
      }
    },
    async addField(row) {
      const res = await this.$api['customer/setUp/tableconfig']({ ... row, property: "自定义", genre: 1, sort: 500 });
      if (res.code !== 200) {
        row.isModify = false;
        this.$message.error(res.msg);
        return;
      }
      this.$message.success("新增字段成功");
      this.getFindAll();
    },
    async modifyField(row) {
      const res = await this.$api['customer/setUp/modifyTableconfig']({ ...row });
      if (res.code !== 200) {
        this.$message.errpr(res.msg);
        return;
      }
      this.$message.success("修改字段成功");
      this.getFindAll();
    },
    cancel(row, flag) {
      if (flag && row.$index === this.customList.length - 1 && !row.row.id) {
        this.customList.splice(row.$index);
        return;
      }
      row.row.isModify = true;
    },
    async templateModification() {
      this.loadings = true;
      const res = await this.$api['customer/setUp/customerremarktemplate']({ content: this.template, id: this.id });
      if (res.code !== 200) return this.$message.error(res.msg);
      this.loadings = false;
      this.getFindAll();
    },
  },
};
</script>
<style lang="scss" scoped>
.setUp{
padding: 15px 20px;
}
.built-in{
  margin-top: 20px;
}
.table-margin{
  margin-bottom:"20px";
}
/deep/.el-input--small input{
  border: 1px solid #d3dff7 !important;
  border-radius: 5px !important;
}
/deep/.el-input--small input:hover{
  border: 1px solid #d3dff7 !important;
  border-radius: 5px !important;
}
.page-title{
  color: #1984df;
  margin: 28px 0px 18px;
}
.built-in{
  box-shadow: rgba(0,0,0,.3) 0 0 10px;
  margin-bottom: 44px;
  padding: 20px 32px;
}
.editor__content{
  border: 1px solid #d3dff7;
  font-size: 12px;
}
.sub{
  width: 188px !important;
  height: 30px !important;
  margin-top: 20px;
  background: #0278DC !important;
}
.add{
  margin: 20px 0 16px 0;
  color: #0278dc;
  float: left;
}
.font-size{
  font-size: 14px;
}
</style>

